<template>
	<view class="padding-lr-sm">
		<swiper class="ad-swiper bg-white c-radius  ad-height" indicator-dots="true" indicator-color="rgba(228,228,228,1)"
		 indicator-active-color="#FECA49" autoplay="true" interval="5000" duration="1000" circular="true">
			<block v-for="(item, index) in ad" :key="index">
				<swiper-item>
					<image :src="item.url" class="c-radius ad-height" ></image>
				</swiper-item>
			</block>
		</swiper>
		<view>
			<scroll-view @scrolltolower="lower" class="scroll-restaurants-list " scroll-y="true" style="height:100%">
				<swiper class=" padding-top-xs padding-bottom-xs margin-top-sm bg-white c-radius" indicator-dots="true" indicator-color="rgba(228,228,228,1)"
				 indicator-active-color="#FECA49">
					<block v-for="(item, index) in categoryList" :key="index">
						<swiper-item class="margin-top-sm">
							<block v-for="(item, index2) in item" :key="index2">
								<view class="category-info" v-if="item.url != 'undefined' || item.url != ''">
									<navigator @tap="toPage(item)">
										<image :src="item.icon" class="category-image"></image>
										<view class="category-text">{{item.name}}</view>
									</navigator>
								</view>
								<view class="category-info" v-else>
									<view @tap="callUndefined()">
										<image :src="item.icon" class="category-image"></image>
										<view class="category-text">{{item.name}}</view>
									</view>
								</view>
							</block>
						</swiper-item>
					</block>
				</swiper>
			</scroll-view>
			<scroll-view scroll-x class="bg-white nav margin-top" scroll-with-animation>
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="item.id == curTypeCd?'text-red cur':''" v-for="(item,index) in activitiTitle"
					 :key="index" @tap="selectActiviti(item)" :data-id="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="noticesList bg-white margin-top-1">
				<block v-for="(item,index) in stores" :key="index" wx:key="index">
					<view class="noticesList-list" @tap="_toDetail(item)">
						<view class="notices-info">
							<view class="notices-info-name">{{item.name}}</view>
							<view class="notice-bottom">
								<view>
									<text class="lg cuIcon-phone notice-startTime margin-left-xs">{{item.tel}}</text>
								</view>

							</view>
							<view class="notice-bottom">
								<view>
									<text class="lg cuIcon-time notice-startTime margin-left-xs">{{item.workTime}}</text>
								</view>

							</view>
							<view class="notice-bottom">
								<view>
									<text class="lg cuIcon-location notice-startTime margin-left-xs">{{item.site}}</text>
								</view>

							</view>
						</view>
						<view class="notices-info-image">
							<image :src="item.icon" />
						</view>
					</view>
				</block>
			</view>
		</scroll-view>

		</view>
	</view>
</template>

<script>
	import {getConMenus,getStoreInfo,getStoreBySeq} from '../../api/shop/shopApi.js'
	import {loadAdverts} from '../../api/ads/adsApi.js'

	export default {
		data() {
			return {
				categoryList: {},
				activitiTitle:  [ {
						name: "最新加入",
						id: "1"
					},{
						name: "特别推荐",
						id: "2"
					}],
				stores: [],
				newstores: [],
				seqstores: [],
				curTypeCd: '1',
				ad:[]
			};
		},
		components: {
		},
		onLoad(option){
			this.vc.onLoad(option);
			this.getCategorys();
			this.getStoreInfos();
			this.getStoreBySeq();
			this._loadAdvertPhoto();
		},
		methods: {
			_loadAdvertPhoto: function() {
				let _that = this;
				let _objData = {
					page: 1,
					row: 5,
					locationTypeCd:'6000'
				};
				//查询 广告
				loadAdverts(_objData)
				.then(function(_aPhotos){
					_that.ad = _aPhotos;
				});
			},
			_toDetail: function(_item) {
				this.vc.navigateTo({
					url: '/pages/convenience/storeInfoDetail?sid=' + _item.storeInfoId
				});
			},
			toPage: function(item) {
				if(item.url.indexOf("pages/") == -1 ){//没有配置页面
					item.url = "/pages/convenience/storelist";
				}
				this.vc.navigateTo({
					url:item.url+'?mid='+item.convenienceMenusId
				})
			},
			callUndefined:function(){
				uni.showToast({
					icon:'none',
					title:'此功能暂不开放'
				})
			},
			getCategorys: function() {
				//查询分类
				let _that = this;
				let _data = {
					page:1,
					row:100
				}
				getConMenus(_data)
				.then(function(_menus){
					let _pnums = Math.ceil(_menus.length/8);
					let pagemenus = {};
					for(var i = 1;i <= _pnums;i++){
						var arr = _menus.slice(8*(i-1),8*i);
						var key = 'page'+i;
						pagemenus[key] = arr;
					}
					_that.categoryList = pagemenus;
				});
			},
			getStoreInfos: function() {
				//查询分类
				let _that = this;
				let _data = {
					page:1,
					row:10,
					isShow: 'Y'
				}
				getStoreInfo(_data)
				.then(function(stores){
					_that.newstores = stores;
					_that.stores = stores;
				});
			},
			getStoreBySeq: function() {
				//查询分类
				let _that = this;
				let _data = {
					page:1,
					row:10,
					isShow: 'Y'
				}
				getStoreBySeq(_data)
				.then(function(stores){
					_that.seqstores = stores;
				});
			},
			selectActiviti: function(_item){
				this.curTypeCd = _item.id;
				this.stores = [];
				if(_item.id == "1"){
					this.stores = this.newstores;
				}else if(_item.id == "2"){
					this.stores = this.seqstores;
				}
			}
		}
	}
</script>

<style>
	.ad-height{
		height: 400upx;
		width: 100%;
	}
	.categoryList {
		width: 100%;
		height: 400upx;
		border-bottom: 20rpx solid #f4f4f4;
	}

	.category-image {
		width: 60rpx;
		height: 60rpx;
	}

	.category-text {
		font-size: 25rpx;
		width: 100%;
	}

	.category-info {
		display: inline-block;
		text-align: center;
		position: relative;
		height: 120rpx;
		width: 25%;
	}
	.noticesList-list{
	  font-size: 25rpx;
	  display: flex;
	  width: 100%;
	  padding: 10rpx 0;
	  border-bottom: 1rpx solid #ECECEC;
	  color: #6D6D6D;
	  justify-content: space-between;
	}
	.notices-info-name{
	  margin-top: 10rpx;
	  color: black;
	  font-size: 30rpx;
	  display: -webkit-box;  /*设置为弹性盒子*/
	  -webkit-line-clamp: 1;  /*最多显示5行*/
	  overflow: hidden;  /*超出隐藏*/
	  text-overflow: ellipsis;  /*超出显示为省略号*/
	  -webkit-box-orient: vertical;
	  word-break: break-all;  /*强制英文单词自动换行*/
	}
	.notices-info-image image{
	  width: 200rpx;
	  height: 150rpx;
	  margin: 35rpx 20rpx 0rpx 20rpx;
	  border-radius: 10rpx;
	}
	.notices-info{
	  margin: 10rpx 0rpx 0rpx 20rpx;
	  height: 180rpx;
	  flex-direction: column;
	  display: flex;
	  justify-content: space-between;
	}
	.notice-bottom{
	  display: flex;
	  text-align: left;
	}
	.notice-startTime{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.notice-bottom view{
	  margin-right: 20rpx;
	}

	.notice-bottom icon{
	  color: #8a8a8a;
	  display: inline-block;
	  width: 40rpx;
	  height: 40rpx;
	}
	.notice-bottom view text{
	  font-size: 25rpx;
	  line-height: 40rpx;
	}

</style>
